<div class="wrapper">
    <div>
        <div class="box box-top">
            <!-- /.box-header -->
            <!-- form start -->
            <form id="templateForm" role="form" action="${base}/admin/template/save" method="post">
                <input type="hidden" name="id" value="${(template.id)!}">
                <input type="hidden" value="${(template.userViewId)!}" class="form-control" name="userViewId" id="userViewId">
                <input type="hidden" value="${(template.createDate?string('MM/dd/yyyy HH:mm:ss'))!}" class="form-control" name="createDate" id="createDate">
                <input type="hidden" value="${(template.modifyDate?string('MM/dd/yyyy HH:mm:ss'))!}" class="form-control" name="modifyDate" id="modifyDate">
                <input type="hidden" value="${(template.status)!}" class="form-control" name="status" id="status">
                <div class="box-body">
                            <div class="form-group">
                                <label for="companyId">Name</label>
                                <select class="js-data-example-ajax form-control select2" name="companyId" id="companyId"  style="width: 100%;">
                                    <#if template.companyId??>
                                        <option value="${(template.companyId)!}" selected="selected">${(template.name)!}</option>
                                    </#if>
                                </select>
                                <input type="hidden" name="name" id="companyName" value="${(template.name)!}">
                            </div>

                            <div class="form-group">
                                <label for="photoType">Photo Type</label>
                                <select class="form-control select2" style="width: 100%;" id="photoType" name="photoType">
                                    <#list photoTypes as obj>
                                        <option <#if (obj.value)! == (template.photoType)!> selected="selected"</#if> value="${(obj.value)!}">${(obj.value)!}</option>
                                    </#list>
                                </select>
                            </div>

                            <div class="form-group">
                                <label for="clientName">Client name</label>
                                <select class="form-control select2" style="width: 100%;" id="clientName" name="clientName">
                                    <#list clientNames as obj>
                                        <option <#if (obj.value)! == (template.clientName)!> selected="selected"</#if> value="${(obj.value)!}">${(obj.value)!}</option>
                                    </#list>
                                </select>
                            </div>

                            <div class="form-group">
                                <label for="productCategory">Product category</label>
                                <select class="form-control select2" style="width: 100%;" id="productCategory" name="productCategory">
                                    <#list productCategorys as obj>
                                        <option <#if (obj.value)! == (template.productCategory)!> selected="selected"</#if> value="${(obj.value)!}">${(obj.value)!}</option>
                                    </#list>
                                </select>
                            </div>

                            <div class="form-group">
                                <label for="photoStyle">Photo style</label>

                                <select class="form-control select2" style="width: 100%;" id="photoStyle" name="photoStyle">
                                    <#list photoStyles as obj>
                                        <option <#if (obj.value)! == (template.photoStyle)!> selected="selected"</#if> value="${(obj.value)!}">${(obj.value)!}</option>
                                    </#list>
                                </select>
                            </div>

                            <div class="form-group">
                                <label for="sceneStyle">Scene Style</label>
                                <select class="form-control select2" style="width: 100%;" id="sceneStyle" name="sceneStyle">
                                    <#list sceneStyles as obj>
                                    <option <#if (obj.value)! == (template.sceneStyle)!> selected="selected"</#if> value="${(obj.value)!}">${(obj.value)!}</option>
                                    </#list>
                                </select>
                            </div>

                            <div class="form-group">
                                <label for="lightingStyle">Lighting Style</label>
                                <select class="form-control select2" style="width: 100%;" id="lightingStyle" name="lightingStyle">
                                    <#list lightingStyles as obj>
                                    <option <#if (obj.value)! == (template.lightingStyle)!> selected="selected"</#if> value="${(obj.value)!}">${(obj.value)!}</option>
                                     </#list>
                                </select>
                            </div>

                            <div class="form-group">
                                <label for="memo">Notes</label>
                                <input type="text" value="${(template.memo)!}" class="form-control" name="memo" id="memo">
                            </div>

                            <div class="form-group">
                                <label for="valid">Valid</label>
                                <select  name="valid" id="valid" class="form-control">
                                    <option value="true" <#if ((template.valid)!true)==true> selected="selected" </#if>>----Valid----</option>
                                    <option value="false" <#if ((template.valid)!true)==false> selected="selected" </#if>>----Invalid----</option>
                                </select>
                            </div>


                    <div class="box-footer">
                        <button type="button" onclick="$('#templateForm').submit();" class="btn btn-primary">Save
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<script type="text/javascript">

    $(function() {
        $("#templateForm").validate({
            submitHandler:function(form){
                submitTemplate();
            }
        });
        debugger;
        $('.js-data-example-ajax').select2({
            ajax: {
                url: '${base}/admin/companys/json',
                dataType: 'json',
                // Additional AJAX parameters go here; see the end of this chapter for the full code of this example
                data: function (params) {
                    var query = {
                        search: params.term,
                        page: params.page || 1
                    }

                    // Query parameters will be ?search=[term]&page=[page]
                    return query;
                }
            }
        });
        $('.js-data-example-ajax').on('select2:select', function (e) {
            var data = e.params.data;
            $("#companyName").val(data.text);
            console.log(data.text);
        });
    });
    function submitTemplate(){
        HF.ajaxFormSubmit('templateForm',function(result){
            HF.Alert("Save Success");
            document.location.reload();
        },function(e){ HF.Alert("Save Failure");});
    }
</script>
